<!-- 如果不需要监听变更数据，就在父组件直接使用v-model:field="" -->
<template>
    <div class="">
        <van-field
            :model-value="field"
            @update:model-value="emits('update:field', $event)"
            :required="required"
            center
            is-link
            :readonly="true"
            :name="name"
            :label="label"
            :placeholder="label"
            :rules="[{ required: required, message: '请选择' + label }]"
            @click="!readonly ? (showPicker = true) : ''"
        />
        <van-popup v-model:show="showPicker" position="bottom" close-on-popstate round>
            <van-picker
                :columns="columns"
                @confirm="onConfirm"
                @cancel="
                    showPicker = false;
                    emits('update:field', '');
                "
            />
        </van-popup>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw } from 'vue';
    import type { Ref, Raw } from 'vue';
    // withDefaults(defineProps<{
    //     field?: any,
    //     name?: string,
    //     label?: string,
    //     columns?: any[],
    // }>(), {
    //     field: '',
    //     name: '',
    //     label: '',
    //     columns: () =>[],
    // })
    const {
        field,
        name,
        label,
        columns,
        readonly = false,
        required = false,
        confirmType = 'selectedValues',
    } = defineProps<{
        field?: any;
        name?: string;
        label?: string;
        columns?: any[];
        readonly?: boolean;
        required?: boolean;
        confirmType?: string; //selectedValues返回值，selectedOptions返回对象
    }>();
    const emits = defineEmits<{
        (e: 'update:field', data: any): void;
    }>();
    const showPicker: Ref<boolean> = ref(false);

    const onConfirm = ({ selectedValues, selectedOptions, selectedIndexes }) => {
        // console.log(confirmType)
        if (confirmType == 'selectedOptions') {
            emits('update:field', selectedOptions[0]);
        } else {
            emits('update:field', selectedValues[0]);
        }
        showPicker.value = false;
    };
</script>

<style lang="scss" scoped></style>
